<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <!--日历功能的CSS-->
    <link rel="stylesheet" type="text/css"
          href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
    <!--分页功能的CSS-->
    <link rel="stylesheet" type="text/css"
          href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <!--日历功能的js-->
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <!--日历功能语言类型的js-->
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <!--分页功能的js-->
    <script type="text/javascript"
            src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    <!--分页功能语言的js-->
    <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.min.js"></script>
    <script type="text/javascript">

        $(function () {
            //给创建按钮添加一个单击事件
            $("#createActivityBtn").click(function () {
                //初始化工作
                //用户添加完表单之后将添加的信息删除
                $("#creatActivityFrom").get(0).reset();

                //点击后显示模态窗口
                $("#createActivityModal").modal("show")
            });

            //给保存按钮绑定单击事件
            $("#saveCreateBtn").click(function () {
                //收集参数
                var owner = $("#create-marketActivityOwner").val();
                var name = $.trim($("#create-marketActivityName").val());
                var startDate = $("#create-startDate").val();
                var endDate = $("#create-endDate").val();
                var cost = $.trim($("#create-cost").val());
                var describe = $.trim($("#create-description").val());

                //根据要求对收集到的数据进行判断
                if (owner == "") {
                    alert("所有者不能为空！");
                    return;
                }
                if (name == "") {
                    alert("名称不能为空！");
                    return;
                }
                if (startDate != "" && endDate != "") {
                    if (endDate < startDate) {
                        alert("结束时间不能小于开始时间！");
                        return;
                    }
                }
                var regExp = /^(([1-9]\d*)|0)$/;
                if (!regExp.test(cost)) {
                    alert("请输入一个非负整数！");
                    return;
                }

                //通过ajax发送请求
                $.ajax({
                    url: "workbench/activity/saveCreateActivity.do",
                    data: {
                        owner: owner,
                        name: name,
                        startDate: startDate,
                        endDate: endDate,
                        cost: cost,
                        describe: describe
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data.code == "1") {
                            //关闭模态窗口
                            $("#createActivityModal").modal("hide");
                            //刷新市场活动，显示第一页数据，保持每页显示条数不变
                            queryActivityByConditionForPage(1, $("#paging").bs_pagination('getOption', 'rowsPerPage'));
                        } else {
                            alert(data.message);
                            $("#createActivityModal").modal("show");
                        }
                    }
                });
            });

            //设置日历的相关参数
            $("#create-startDate,#create-endDate,#edit-startTime,#edit-endTime").datetimepicker({
                //使用封装好的一些参数
                language: 'zh-CN',//1.设置语言
                format: 'yyyy-mm-dd',//2.显示日期的格式
                minView: 'month',//3.显示到最小的窗口
                initData: new Date(),//4.显示的初始的日期
                autoclose: true,//5.选择完日期后是否自动关闭
                todayBtn: true,//6.是否开启“今天选择按钮”
                clearBtn: true,//7.是否开启清空按钮
            });

            //当市场活动页面查询完成以后，查询数据的第一页以及总记录数，并将这些数据显示出来
            //因为要多次调用所以要将这些函数封装起来

            queryActivityByConditionForPage(1, 10);

            //对分页查询按钮进行绑定并调用函数实现查询功能
            $("#queryActivityBtn").click(function () {
                /*
                 * $("#paging").bs_pagination('getOption','rowsPerPage')
                 * 这行代码是分页功能提供的，目的是为了让查询后每页显示代码数和之前用户自定义的一致
                 */
                queryActivityByConditionForPage(1, $("#paging").bs_pagination('getOption', 'rowsPerPage'));
            });

            //给选择按钮加上一个全选和全不选的功能
            $("#checkedAll").click(function () {
                //如果该check选中则下面的check都选中，反之则都不选中，就相当于下面的check中的checked值都与check一致
                $("#tBody input[type='checkbox']").prop("checked", this.checked)
            });

            //如果在列表中有一个选择器没有选中，那么全选功能就要失效，
            /*此时要使用jquery的on函数：父选择器.on("事件类型",子选择器,function(){
                                                   js代码
                                                   this
                                    });
            */
            $("#tBody").on("click", "input[type='checkbox']", function () {
                //对选择框中的checked进行判断
                //如果表中的checkbox都已经选中那么就让全选也选中，反之，只要有一个没有选中就让全选不选中
                //这种写法是为了将checkedbox和已选中的checkbox的数量进行比较
                if ($("#tBody input[type='checkbox']").size() == $("#tBody input[type='checkbox']:checked").size()) {
                    $("#checkedAll").prop("checked", true);
                } else {
                    $("#checkedAll").prop("checked", false);
                }
            });

            //实现删除功能
            $("#deleteActivityBtn").click(function () {
                //判断有没有选择框选中
                var checkedIds = $("#tBody input[type='checkbox']:checked");
                if (checkedIds.size() == 0) {
                    alert("请选择一个市场活动！");
                    return;
                }
                //确认是否删除市场活动
                if (window.confirm("确认删除吗?")) {
                    //将选中的选择框的id值（需要拼接）传到后端
                    var ids = "";
                    $.each(checkedIds, function () {//字符串形式为：id=xxx&id=xxx...&;注意最后一个&不要
                        ids += "id=" + this.value + "&";
                    });
                    //substr的作用是去除最后一个&
                    ids = ids.substr(0, ids.length - 1);

                    //发送ajax请求
                    $.ajax({
                        url: 'workbench/activity/deleteActivityByIds.do',
                        data: ids,//这里的ids如果用之前的方式会导致数据被覆盖
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            if (data.code == "1") {
                                //刷新市场活动，显示第一页数据，保持每页显示条数不变
                                queryActivityByConditionForPage(1, $("#paging").bs_pagination('getOption', 'rowsPerPage'));
                            } else {
                                alert(data.message);
                            }
                        }
                    });
                }
            });

            //实现弹出修改模态窗口将对应修改的表单数据显示出来
            $("#editActivityBtn").click(function () {
                //收集参数
                //获取选中选择器的id,同时选择器只能选择一个
                var checkedId = $("#tBody input[type='checkbox']:checked");
                if (checkedId.size() == 0) {
                    alert("请选择一个市场活动！");
                    return;
                }
                if (checkedId.size() > 1) {
                    alert("只能选择一个！");
                    return;
                }
                var id = checkedId.val();

                //发送ajax
                $.ajax({
                    url: 'workbench/activity/queryActivityById.do',
                    data: {
                        id: id
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        //发送参数
                        $("#edit-id").val(data.id);//id
                        $("#edit-marketActivityOwner").val(data.owner);//owner
                        $("#edit-marketActivityName").val(data.name);//name
                        $("#edit-startTime").val(data.startDate);//startDate
                        $("#edit-endTime").val(data.endDate);//endDate
                        $("#edit-cost").val(data.cost);//cost
                        $("#edit-describe").val(data.description);
                        //弹出模态窗口
                        $("#editActivityModal").modal("show");
                    }
                });
            });

            //实现修改功能并保存
            $("#saveUpdateActivity").click(function () {
                //传递参数
                var id = $("#edit-id").val();
                var owner = $("#edit-marketActivityOwner").val();
                var name = $.trim($("#edit-marketActivityName").val());
                var startDate = $("#edit-startTime").val();
                var endDate = $("#edit-endTime").val();
                var cost = $.trim($("#edit-cost").val());
                var description = $.trim($("#edit-describe").val());
                //根据要求对收集到的数据进行判断
                if (owner == "") {
                    alert("所有者不能为空！");
                    return;
                }
                if (name == "") {
                    alert("名称不能为空！");
                    return;
                }
                if (startDate != "" && endDate != "") {
                    if (endDate < startDate) {
                        alert("结束时间不能小于开始时间！");
                        return;
                    }
                }
                var regExp = /^(([1-9]\d*)|0)$/;
                if (!regExp.test(cost)) {
                    alert("请输入一个非负整数！");
                    return;
                }
                $.ajax({
                    url: 'workbench/activity/saveUpdateActivity.do',
                    data: {
                        id: id,
                        owner: owner,
                        name: name,
                        startDate: startDate,
                        endDate: endDate,
                        cost: cost,
                        description: description
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data.code == "1") {
                            //关闭模态窗口
                            $("#editActivityModal").modal("hide");
                            //刷新市场活动，显示第当前页数据，保持每页显示条数不变
                            queryActivityByConditionForPage($("#paging").bs_pagination('getOption', 'currentPage'), $("#paging").bs_pagination('getOption', 'rowsPerPage'));
                        } else {
                            alert(data.message);
                            $("#editActivityModal").modal("show");
                        }
                    }
                });
            });

            //实现批量下载功能
            $("#exportActivityAllBtn").click(function () {
                window.location.href = "workbench/activity/exportAllActivities.do";
            });

            //实现根据选中框选择下载功能
            $("#exportActivityXzBtn").click(function () {
                var checkedIds = $("#tBody input[type='checkbox']:checked");
                if (checkedIds.size() == 0) {
                    alert("请选择要导出的市场活动");
                    return;
                }
                //将选中的选择框的id值（需要拼接）传到后端
                var ids = "?";
                $.each(checkedIds, function () {//字符串形式为：id=xxx&id=xxx...&;注意最后一个&不要
                    ids += "id=" + this.value + "&";
                });
                //substr的作用是去除最后一个&
                ids = ids.substr(0, ids.length - 1);
                window.location.href = "workbench/activity/exportActivitiesById.do" + ids;
            });

            //实现文件上传功能
            $("#importActivityBtn").click(function () {
                //判断导入文件的类型
                var activityFilename = $("#activityFile").val();
                //获取.后的字符并转换为全小写
                var suffix = activityFilename.substr(activityFilename.lastIndexOf(".") + 1).toLocaleLowerCase();
                if (suffix != "xls") {
                    alert("请添加xls文件！")
                    return;
                }
                //判断文件大小
                //需要先获取对应的document类型
                //注意：文件本体存在document中的files中；并且实际上W3C规定了可以一次性传入多个文件，但是现在的浏览器没有实现，故file是个数组，取第一个文件
                var activityFile = $("#activityFile")[0].files[0];
                //大于5M
                if (activityFile.size > 5 * 1024 * 1024) {
                    alert("传入文件不能大于5M");
                    return;
                }

                //FormData是ajax提供的接口,可以模拟键值对向后台提交参数;
                //FormData最大的优势是不但能提交文本数据，还能提交二进制数据
                var formData=new FormData();
                formData.append("activityFile",activityFile);

                //发送请求
                $.ajax({
                    url:'workbench/activity/importActivity.do',
                    data:formData,
                    processData:false,//设置ajax向后台提交参数之前，是否把参数统一转换成字符串：true--是,false--不是,默认是true
                    contentType:false,//设置ajax向后台提交参数之前，是否把所有的参数统一按urlencoded编码：true--是,false--不是，默认是true
                    type:'post',
                    dataType:'json',
                    success:function (data){
                        if(data.code=="1"){
                            //提示返回多少条数据
                            alert("成功导入了 "+ data.retData + " 条数据");
                            //关闭模态窗口
                            $("#importActivityModal").modal("hide");
                            //刷新市场活动，显示第一页数据，保持每页显示条数不变
                            queryActivityByConditionForPage(1, $("#paging").bs_pagination('getOption', 'rowsPerPage'));
                        }else{
                            alert(data.message);
                            $("#importActivityModal").modal("show");
                        }
                    }
                });
            });

            //实现跳转到市场活动详情页
            $("#detailBtn").click(function (){

            });
        });


        //被封装的函数
        //放入参数中，被调用者进行赋值
        function queryActivityByConditionForPage(pageNo, pageSize) {
            var name = $("#query-name").val();
            var owner = $("#query-owner").val();
            var startDate = $("#query-startData").val();
            var endDate = $("#query-endDate").val();
            //如果要实现分页的功能，那么这两个参数肯定不能写死
            // var pageNo = 1;
            // var pageSize = 10;

            $.ajax({
                url: "workbench/activity/queryActivityByConditionForPage.do",
                data: {
                    name: name,
                    owner: owner,
                    startDate: startDate,
                    endDate: endDate,
                    pageNo: pageNo,
                    pageSize: pageSize
                },
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    //将查到的总记录数显示在页面上
                    $("#totalRowsB").text("总共" + data.totalRows + "条数据")
                    //将数据库里的数据通过each循环到页面上
                    var htmlStr = "";
                    $.each(data.activityList, function (index, obj) {
                        htmlStr += "<tr class=\"active\">";
                        htmlStr += "<td><input type=\"checkbox\" value=\"" + obj.id + "\"/></td>";
                        htmlStr += "<td><a style=\"text-decoration: none; cursor: pointer;\" " +
                       "onclick=\"window.location.href='workbench/activity/queryActivityForDetailById.do?id="+obj.id+"'\">"+obj.name+"</a></td>";
                        htmlStr += "<td>" + obj.owner + "</td>";
                        htmlStr += "<td>" + obj.startDate + "</td>";
                        htmlStr += "<td>" + obj.endDate + "</td>";
                        htmlStr += "</tr>";
                    });
                    $("#tBody").html(htmlStr);

                    //使用分页功能以后要将选择器重新变为未选中的状态
                    $("#checkedAll").prop("checked", false);

                    //此处是计算总页数;只有除完为整数才能用
                    //parseInt：该函数为js的系统函数，作用是取小数中的整数部分
                    var totalPages = 1;
                    if (data.totalRows % pageSize == 0) {
                        totalPages = data.totalRows / pageSize;
                    } else {
                        totalPages = parseInt(data.totalRows / pageSize) + 1;
                    }

                    //当ajax完成后再使用分页查询，这时pageNo和pageSize两个参数才会显示出来
                    //在此处使用分页函数
                    $("#paging").bs_pagination({
                        currentPage: pageNo,//当前页号，相当于PageNo
                        rowsPerPage: pageSize,//每页显示的数据数,相当于PageSize
                        totalRows: data.totalRows,//总条数
                        totalPages: totalPages,//总页数，必填参数，没有默认值
                        visiblePageLinks: 5,//最多可以显示的卡片数

                        showGoToPage: true,//boolean值，是否显示跳转的“跳转到”的部分,默认true
                        showRowsPerPage: true,//是否显示“每页显示条数”部分，默认true--显示
                        showRowsInfo: true,//是否显示记录信息，默认为true

                        //用户每次切换页号，都会执行本段函数
                        //每次切换页号之后，返回的pageNo和pageSize
                        onChangePage: function (event, pageObj) {
                            //js代码
                            //在此处再一次调用queryActivityByConditionForPage函数是因为在用户使用跳转页面时可以将跳转后的页面数据传给该函数使得
                            //后端数据库能够与前端分页功能同步，将后端页面显示出来
                            //注意：这里虽然出现了函数调用再次调用自己的情况，但是不会出粗是因为，再次调用是有要求的，必须是用户每次切换页号
                            queryActivityByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);
                        }
                    });
                }
            });
        }

    </script>
</head>
<body>

<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" id="creatActivityFrom" role="form">

                    <div class="form-group">
                        <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-marketActivityOwner">
                                <c:forEach items="${requestScope.userList}" var="user">
                                    <!--这里传回参数使用id，给用户显示name-->
                                    <option value="${user.id}">${user.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-marketActivityName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-startDate">
                        </div>
                        <label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-endDate">
                        </div>
                    </div>
                    <div class="form-group">

                        <label for="create-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-cost">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-description" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="create-description"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveCreateBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
            </div>
            <div class="modal-body">
                <!--这里添加了一个隐藏域用于储存id-->
                <input type="hidden" id="edit-id"/>

                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-marketActivityOwner">
                                <c:forEach items="${requestScope.userList}" var="user">
                                    <!--这里传回参数使用id，给用户显示name-->
                                    <option value="${user.id}">${user.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-startTime" value="2020-10-10">
                        </div>
                        <label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-endTime" value="2020-10-20">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-cost" value="5,000">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-describe" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveUpdateActivity">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 导入市场活动的模态窗口 -->
<div class="modal fade" id="importActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
            </div>
            <div class="modal-body" style="height: 350px;">
                <div style="position: relative;top: 20px; left: 50px;">
                    请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
                </div>
                <div style="position: relative;top: 40px; left: 50px;">
                    <input type="file" id="activityFile">
                </div>
                <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;">
                    <h3>重要提示</h3>
                    <ul>
                        <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
                        <li>给定文件的第一行将视为字段名。</li>
                        <li>请确认您的文件大小不超过5MB。</li>
                        <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                        <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                        <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                        <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
            </div>
        </div>
    </div>
</div>


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>市场活动列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" type="text" id="query-name">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" id="query-owner">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">开始日期</div>
                        <input class="form-control" type="text" id="query-startData"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">结束日期</div>
                        <input class="form-control" type="text" id="query-endDate">
                    </div>
                </div>

                <button type="button" class="btn btn-default" id="queryActivityBtn">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-primary" id="createActivityBtn"><span
                        class="glyphicon glyphicon-plus"></span> 创建
                </button>
                <button type="button" class="btn btn-default" id="editActivityBtn"><span
                        class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button type="button" class="btn btn-danger" id="deleteActivityBtn"><span
                        class="glyphicon glyphicon-minus"></span> 删除
                </button>
            </div>
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal">
                    <span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）
                </button>
                <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）
                </button>
                <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）
                </button>
            </div>
        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="checkedAll"/></td>
                    <td id="detailBtn">名称</td>
                    <td>所有者</td>
                    <td>开始日期</td>
                    <td>结束日期</td>
                </tr>
                </thead>
                <tbody id="tBody">
                <%--						<tr class="active">--%>
                <%--							<td><input type="checkbox" /></td>--%>
                <%--							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>--%>
                <%--                            <td>zhangsan</td>--%>
                <%--							<td>2020-10-10</td>--%>
                <%--							<td>2020-10-20</td>--%>
                <%--						</tr>--%>
                <%--                        <tr class="active">--%>
                <%--                            <td><input type="checkbox" /></td>--%>
                <%--                            <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>--%>
                <%--                            <td>zhangsan</td>--%>
                <%--                            <td>2020-10-10</td>--%>
                <%--                            <td>2020-10-20</td>--%>
                <%--                        </tr>--%>
                </tbody>
            </table>
        </div>

        <!--使用bootStrap的分页功能-->
        <div id="paging"></div>
        <%--        <div style="height: 50px; position: relative;top: 30px;">--%>
        <%--            <div>--%>
        <%--                <button type="button" class="btn btn-default" style="cursor: default;" id="totalRowsB">共<b>50</b>条记录--%>
        <%--                </button>--%>
        <%--            </div>--%>
        <%--            <div class="btn-group" style="position: relative;top: -34px; left: 110px;">--%>
        <%--                <button type="button" class="btn btn-default" style="cursor: default;">显示</button>--%>
        <%--                <div class="btn-group">--%>
        <%--                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">--%>
        <%--                        10--%>
        <%--                        <span class="caret"></span>--%>
        <%--                    </button>--%>
        <%--                    <ul class="dropdown-menu" role="menu">--%>
        <%--                        <li><a href="#">20</a></li>--%>
        <%--                        <li><a href="#">30</a></li>--%>
        <%--                    </ul>--%>
        <%--                </div>--%>
        <%--                <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>--%>
        <%--            </div>--%>
        <%--            <div style="position: relative;top: -88px; left: 285px;">--%>
        <%--                <nav>--%>
        <%--                    <ul class="pagination">--%>
        <%--                        <li class="disabled"><a href="#">首页</a></li>--%>
        <%--                        <li class="disabled"><a href="#">上一页</a></li>--%>
        <%--                        <li class="active"><a href="#">1</a></li>--%>
        <%--                        <li><a href="#">2</a></li>--%>
        <%--                        <li><a href="#">3</a></li>--%>
        <%--                        <li><a href="#">4</a></li>--%>
        <%--                        <li><a href="#">5</a></li>--%>
        <%--                        <li><a href="#">下一页</a></li>--%>
        <%--                        <li class="disabled"><a href="#">末页</a></li>--%>
        <%--                    </ul>--%>
        <%--                </nav>--%>
        <%--            </div>--%>
        <%--        </div>--%>

    </div>

</div>
</body>
</html>